<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预约详情 - 人才职业生涯规划平台</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/appointment-detail.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
    <div class="app-container">
        <!-- 头部导航 -->
        <header class="page-header">
            <button class="back-button" onclick="history.back()">
                <i class="bi bi-chevron-left"></i>
            </button>
            <h1 class="page-title">预约详情</h1>
        </header>

        <!-- 主内容区域 -->
        <main class="main-content">
            <!-- 详情卡片 -->
            <div class="detail-card">   
                <!-- 卡片头部 -->
                <div class="card-header">
                    <!-- 状态背景横幅，会根据状态动态添加对应类名 -->
                    <div class="status-banner" id="status-banner"></div>
                    
                    <!-- 经纪人信息 -->
                    <div class="agent-profile">
                        <img src="../img/agent1.jpg" alt="经纪人头像" class="agent-avatar" id="agent-avatar">
                        <div class="agent-details">
                            <div class="agent-name" id="agent-name">王老师</div>
                            <div class="agent-title" id="agent-title">资深职业规划师</div>
                            <div class="agent-rating">
                                <i class="bi bi-star-fill"></i>
                                <span id="agent-rating">4.9</span>
                            </div>
                        </div>
                        <!-- 状态标签，会根据状态动态添加对应类名 -->
                        <span class="status-tag" id="status-tag"></span>
                    </div>
                </div>
                
                <!-- 预约详情 -->
                <div class="card-section">
                    <h3 class="section-title">预约信息</h3>
                    <div class="detail-row">
                        <div class="detail-label">服务项目</div>
                        <div class="detail-value" id="service-type">职业生涯规划</div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">预约编号</div>
                        <div class="detail-value" id="appointment-id">AP202305100001</div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">创建时间</div>
                        <div class="detail-value" id="created-time">2023-05-08 09:15</div>
                    </div>
                    <div class="detail-row" id="status-time-container">
                        <div class="detail-label" id="status-time-label">预约时间</div>
                        <div class="detail-value" id="status-time-value">2023-05-10 14:00</div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">服务时长</div>
                        <div class="detail-value" id="service-duration">60分钟</div>
                    </div>
                </div>
                
                <!-- 服务内容 -->
                <div class="card-section">
                    <h3 class="section-title">服务内容</h3>
                    <div class="detail-value" id="service-description">
                        根据个人情况为你量身定制高效的职业发展规划，指导简历优化，提升求职竞争力，帮助你找到合适的职业方向。
                    </div>
                </div>
                
                <!-- 费用信息 -->
                <div class="card-section">
                    <h3 class="section-title">费用信息</h3>
                    <div class="payment-info">
                        <div class="payment-row">
                            <span>服务原价</span>
                            <span id="original-price">¥399.00</span>
                        </div>
                        <div class="payment-row">
                            <span>优惠折扣</span>
                            <span id="discount">-¥100.00</span>
                        </div>
                        <div class="payment-row">
                            <span>实付金额</span>
                            <span id="actual-price">¥299.00</span>
                        </div>
                    </div>
                </div>
                
                <!-- 状态特定内容容器 -->
                <div id="status-specific-content">
                    <!-- 各状态特定内容将动态插入这里 -->
                    <!-- 预约中 -->
                    <div id="pending-content">
                        <div class="card-section">
                            <h3 class="section-title">温馨提示</h3>
                            <div class="detail-value">
                                <p>您已成功预约咨询服务，经纪人将按约定时间为您提供服务。</p>
                                <p>请提前5分钟进入陪跑室，确保网络和设备正常。</p>
                            </div>
                            <div class="actions-container" style="margin-top: 15px;">
                                <button class="action-button action-danger" id="cancel-btn">取消预约</button>
                                <button class="action-button action-secondary">修改时间</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 陪跑中 -->
                    <div id="ongoing-content">
                        <div class="card-section">
                            <h3 class="section-title">服务进度</h3>
                            <div class="progress-container">
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: 45%;"></div>
                                </div>
                                <div class="progress-time">
                                    <span>0:00</span>
                                    <span>剩余: 33:15</span>
                                    <span>1:00:00</span>
                                </div>
                            </div>
                            <button class="action-button action-primary">继续陪跑服务</button>
                        </div>
                    </div>
                    
                    <!-- 已完成 -->
                    <div id="completed-content">
                        <div class="card-section">
                            <h3 class="section-title">服务评价</h3>
                            <div id="rating-area">
                                <div class="stars-container">
                                    <i class="bi bi-star-fill star"></i>
                                    <i class="bi bi-star-fill star"></i>
                                    <i class="bi bi-star-fill star"></i>
                                    <i class="bi bi-star-fill star"></i>
                                    <i class="bi bi-star-fill star"></i>
                                </div>
                                <div class="rating-comment">
                                    <p>老师非常专业，解答详细，给了我很多实用的建议，对我的职业规划有很大帮助！</p>
                                </div>
                            </div>
                            
                            <div class="actions-container" style="margin-top: 15px;">
                                <button class="action-button action-secondary">查看服务记录</button>
                                <button class="action-button action-primary">再次预约</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 已取消 -->
                    <div id="cancelled-content">
                        <div class="card-section">
                            <h3 class="section-title">取消信息</h3>
                            <div class="detail-row">
                                <div class="detail-label">取消时间</div>
                                <div class="detail-value">2023-05-09 11:00</div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-label">取消原因</div>
                                <div class="detail-value">个人时间调整</div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-label">退款状态</div>
                                <div class="detail-value">已退款</div>
                            </div>
                            
                            <button class="action-button action-primary" style="margin-top: 15px;">重新预约</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 联系客服 -->
            <div class="detail-card">
                <div class="card-section" style="border-bottom: none;">
                    <div class="contact-support">
                        <i class="bi bi-headset"></i>
                        <span>如有疑问，请 <a href="#">联系客服</a></span>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取URL参数
            const urlParams = new URLSearchParams(window.location.search);
            const status = urlParams.get('status') || 'pending'; // 默认为预约中
            const appointmentId = urlParams.get('id') || 'AP202305100001';
            
            // 更新状态相关UI
            updateStatusUI(status);
            
            // 如果有ID参数，可以加载具体预约数据
            // loadAppointmentData(appointmentId);
            
            // 绑定按钮事件
            document.getElementById('cancel-btn')?.addEventListener('click', function() {
                if (confirm('确定要取消此次预约吗？')) {
                    // 模拟取消操作
                    alert('预约已取消');
                    // 实际业务中这里应该调用API，然后根据返回结果进行页面跳转
                    window.location.href = 'appointments.html';
                }
            });
        });
        
        // 根据状态更新UI
        function updateStatusUI(status) {
            // 更新状态标签和横幅
            const statusTag = document.getElementById('status-tag');
            const statusBanner = document.getElementById('status-banner');
            
            // 清除可能存在的类名
            statusTag.classList.remove('status-pending', 'status-ongoing', 'status-completed', 'status-cancelled');
            statusBanner.classList.remove('pending-banner', 'ongoing-banner', 'completed-banner', 'cancelled-banner');
            
            let statusText = '';
            
            // 设置对应状态样式
            switch(status) {
                case 'pending':
                    statusTag.classList.add('status-pending');
                    statusBanner.classList.add('pending-banner');
                    statusText = '预约中';
                    showStatusContent('pending');
                    break;
                case 'ongoing':
                    statusTag.classList.add('status-ongoing');
                    statusBanner.classList.add('ongoing-banner');
                    statusText = '陪跑中';
                    showStatusContent('ongoing');
                    break;
                case 'completed':
                    statusTag.classList.add('status-completed');
                    statusBanner.classList.add('completed-banner');
                    statusText = '已完成';
                    showStatusContent('completed');
                    break;
                case 'cancelled':
                    statusTag.classList.add('status-cancelled');
                    statusBanner.classList.add('cancelled-banner');
                    statusText = '已取消';
                    showStatusContent('cancelled');
                    break;
            }
            
            // 更新状态文本
            statusTag.textContent = statusText;
            
            // 更新状态时间标签
            const statusTimeLabel = document.getElementById('status-time-label');
            if (statusTimeLabel) {
                switch(status) {
                    case 'pending':
                        statusTimeLabel.textContent = '预约时间';
                        break;
                    case 'ongoing':
                        statusTimeLabel.textContent = '开始时间';
                        break;
                    case 'completed':
                        statusTimeLabel.textContent = '完成时间';
                        break;
                    case 'cancelled':
                        statusTimeLabel.textContent = '取消时间';
                        break;
                }
            }
        }
        
        // 显示对应状态的内容
        function showStatusContent(status) {
            const statusSpecificContent = document.getElementById('status-specific-content');
            statusSpecificContent.style.display = 'block';
            
            // 隐藏所有状态内容
            document.getElementById('pending-content').style.display = 'none';
            document.getElementById('ongoing-content').style.display = 'none';
            document.getElementById('completed-content').style.display = 'none';
            document.getElementById('cancelled-content').style.display = 'none';
            
            // 显示对应状态内容
            document.getElementById(`${status}-content`).style.display = 'block';
        }
        
        // 加载预约数据，真实环境会通过API获取
        function loadAppointmentData(appointmentId) {
            // 这里应该是API调用或其他数据获取方式
            console.log(`加载预约ID: ${appointmentId} 的数据`);
            
            // 模拟数据加载...
            // 实际环境中这些数据会从API返回
        }
    </script>
</body>
</html> 